<template>
  <div>
    <div class="info" :style="{'background': getBack}">
      <div class="vip-icon">
        <div v-if="!userinfo.user_icon">
          <img src="../../../assets/img/member/bt_head_color.png" alt="">
        </div>
        <div v-else>
          <img :src="userIcon" alt="">
        </div>
      </div>
      <div class="content">
        <div class="content-name">
          <span class="info-name" :style="{color : userinfo.vip_level == 0 ? '#555555' : '#ffffff'}">{{userinfo.user_nickname}}</span>
          <span class="info-icon" v-show="userinfo.vip_level != 0" :style="{color: getInfoIcon.color}">{{getInfoIcon.name}}</span>
        </div>
        <div class="content-text">
          <div v-if="userinfo.vip_level == 0" style="color: #888888">您未开通PLUS会员</div>
          <div v-else style="color: #fff">会员到期：{{ endTime | formatTimestamp}}</div>
        </div>
      </div>
      <div class="brand-img">
        <img v-if="userinfo.vip_level == 0" src="../../../assets/img/member/vipSystem_vip0.png" alt="">
        <img v-else-if="userinfo.vip_level == 1" src="../../../assets/img/member/vipSystem_vip1.png" alt="">
        <img v-else src="../../../assets/img/member/vipSystem_vip2.png" alt="">
      </div>
    </div>
    <div v-if="userinfo.vip_level != 0" class="vip_userimg">
      <img :src="vipUserImg" alt="">
    </div>
    <div class="daily">
      <div class="daily-icon"></div>
      <div class="daily-text">{{tipsInfoTitle}}</div>
      <div class="daily-btn" @click="tipsClick">{{tipsInfoBtn}}</div>
    </div>
  </div>
</template>

<script>
// import {mapState} from 'vuex'
// import {getPost} from '../../../../network/post'
import {Toast} from 'vant'

export default {
  props: {
    vipInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    userinfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      currentIndex: 0,
      vipUserImg: require("../../../assets/img/member/icon_vipuser.png"),
    }
  },
  mounted() {
    
  },
  methods: {
    tipsClick() {
      if(this.vipInfo.vip_level < 2) {
        this.$router.push('/vip_pay_page/3')
      }else {
        var url = '/vip_get_ptb'
        var data = {
          is_ajax: 1
        }
        getPost(url, data).then(res => {
          if(res.status == 'ok') {
            Toast('领取成功')
          }else {
            Toast(res.info)
          }
        })
      }
    }
  },
  computed: {
    getBack() {
      if(this.userinfo.vip_level == 0) {
        return 'linear-gradient(133deg, #E9E9E9 0%, #BBBBBB 100%)'
      }else if (this.userinfo.vip_level == 1) {
        return 'linear-gradient(133deg, #8FC4FF 0%, #418DFF 100%)'
      }else{
        return 'linear-gradient(133deg, #F1C973 0%, #E3A341 100%)'
      }
    },
    getInfoIcon() {
      if(this.userinfo.vip_level == 0) {
        return {type:'购买会员可每天领取5代币',btnText: '立即开通'}
      }else if (this.userinfo.vip_level == 1) {
        return {name: '普通会员',color: '#3D6DE5',type:'升级PLUS会员每天领取5代币',btnText: '立即升级'}
      }else{
        return {name: 'PLUS会员',color: '#9E6B13',type:'每天领取5代币',btnText: '立即领取'}
      }
    },
    tipsInfoTitle() {
      if(this.vipInfo.tips_info) {
        return this.vipInfo.tips_info.title
      }
    },
    tipsInfoBtn() {
      if(this.vipInfo.tips_info) {
        return this.vipInfo.tips_info.btn
      }
    },
    userIcon() {
      if(this.vipInfo.user_community_data) {
        return this.vipInfo.user_community_data.user_icon
      }
    },
    endTime() {
      if (this.vipInfo.user_vip) {
        return this.vipInfo.user_vip.endtime
      }
    },
    // ...mapState([
    //   'token'
    // ])
  },
  filters: {
    formatTimestamp( timestamp ) {
      var dateObj = new Date( timestamp * 1000 );   
      var year = dateObj.getYear() + 1900;
      var month = dateObj.getMonth() + 1;
      month = month < 10 ? '0' + month : month
      var theDate = dateObj.getDate();   
      theDate = theDate < 10 ? '0' + theDate : theDate
      return year +"-"+ month +"-" + theDate     
    },
  }
}
</script>

<style scoped>
.info {
  box-sizing: border-box;
  display: flex;
  padding: .6rem .266667rem;
  position: relative;
  margin: .4rem .426667rem 0;
  width: 9.146667rem;
  height: 2.666667rem;
  border-radius: .266667rem;
}

.brand-img {
  position: absolute;
  top: 0;
  right: .266667rem;
  width: 1.466667rem;
  height: 1.893333rem;
}

.brand-img img {
  width: 100%;
  height: 100%;
}

.vip-icon {
  width: 1.466667rem;
  height: 1.466667rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: .266667rem;
}

.vip-icon img {
  width: 100%;
  height: 100%;
}

.info-name {
  font-size: .426667rem;
  font-weight: bold;
  margin-right: .133333rem;
}

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 1.466667rem;
}

.content-name {
  display: flex;
  align-items: center;
}

.content-text {
  font-size: .346667rem;
  font-weight: 500;
}

.info-icon {
  display: inline-block;
  width: 1.466667rem;
  height: .4rem;
  background: #FFFFFF;
  border-radius: .213333rem;
  font-size: .266667rem;
  text-align: center;
  font-weight: 500;
  line-height: .4rem;
}

.daily {
  box-sizing: border-box;
  width: 10rem;
  height: 1.466667rem;
  background: linear-gradient(131deg, #FFEDD5 0%, #FFDAAA 100%);
  margin: .266667rem 0 0;
  padding: .226667rem .266667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.daily-icon {
  flex-shrink: 1;
  width: 1.013333rem;
  height: 1.013333rem;
  background: url('../../../assets/img/member/daily-icon.png') no-repeat;
  background-size: 100%;
}

.daily-text {
  margin-left: .133333rem;
  flex-grow: 1;
  font-size: .373333rem;
  font-weight: bold;
  color: #A96B24;
}

.daily-btn {
  flex-shrink: 1;
  width: 2.133333rem;
  height: .773333rem;
  background: linear-gradient(129deg, #FFBC64 0%, #FC852A 100%);
  box-shadow: 0 .04rem 0 #C44300;
  border-radius: .466667rem;
  text-align: center;
  line-height: .8rem;
  font-size: .346667rem;
  color: #fff;
}

.vip_userimg {
  position: absolute;
  top: .693333rem;
  left: .64rem;
  width: 1.653333rem;
  height: 1.84rem;
}

.vip_userimg img {
    width: 1.653333rem;
    height: 1.84rem;
  }

</style>